<template>
  <div class="login">
    <van-nav-bar title="登录"/>
<van-form @submit="onSubmit">
  <van-field
    v-model="mobile"
    required
    label="手机号"
    placeholder="请输入手机号"
    :rules="[{ required: true, message: '请填写手机号' },{min:1,max:10,message:'亲, 请输入正确的 11 位手机号呀'}]"
  />
  <!-- error-message="验证码格式错误" -->
  <van-field
    v-model="code"
    required
    label="验证码"
    placeholder="请输入验证码"
    :rules="[{ required: true, message: '请填写验证码' }]"
  />
</van-form>
<div class="btn-wrap">
 <van-button round block type="info" native-type="submit">登录</van-button>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      mobile: '13912345678',
      code: '246810'
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  .btn-wrap {
    padding: 20px;
    .van-button {
      width: 100%;
      color: #fff;
      border-radius: 5px;
    }
  }
}
</style>
